import React, { useState, useEffect } from 'react';
import { Modal, Form, Input, Space, Button, message, Radio, Row, Col, Select } from 'antd';
const { TextArea } = Input;
import { OPERATE_ADD, OPERATE_EDIT } from '../../../constants/index'
import { useIntl } from 'umi'
import {SELECT_LABEL} from '../../../constants'
import { createNotice, updateNotice } from '../../../services/notice';
import PaginationQueryNoticeTable from './PaginationQueryNoticeTable';
function NoticeOperatePanel({ operateType, data, closePanel }) {
    const intl = useIntl();
    const [form] = Form.useForm();
    const [open, setOpen] = useState(true);
    const [selectLoading, setSelectLoading] = useState(true)
    const [confirmLoading, setConfirmLoading] = useState(false);
    const handleOk = async (form) => {
        setConfirmLoading(true);
        if (operateType === OPERATE_ADD) {
            await createNotice(form).then(res => {
                if (res.success) {
                    message.success(res.msg)
                    setConfirmLoading(false)
                    handleCancel()
                } else {
                    setConfirmLoading(false)
                }
            }).catch(err => {
                console.log(err);
                setConfirmLoading(false)
            })
        } else {
            form.unCode = data.unCode
            await updateNotice(form).then(res => {
                if (res.success) {
                    message.success(res.msg)
                    setConfirmLoading(false)
                    handleCancel()
                } else {
                    setConfirmLoading(false)
                }
            }).catch(err => {
                console.log(err);
                setConfirmLoading(false)
            })
        }

    };
 const handleCancel = () => {
        setOpen(false);
    };
    return (
        <>
            <Modal
                title={operateType === OPERATE_ADD ? "新增公告" : "编辑公告"}
                open={open}
                destroyOnClose={true}
                confirmLoading={confirmLoading}
                onCancel={handleCancel}
                afterClose={closePanel}
                centered={true}
                footer={false}
                width={800}
            >
                <Form
                    name={form}
                    style={{
                        maxWidth: 800,
                    }}
                    onFinish={handleOk}
                    labelCol={{ span: 7 }}
                    wrapperCol={{ span: 17 }}
                    initialValues={data}
                    autoComplete="on"
                >
                    <Form.Item
                        label={intl.formatMessage({
                            id: 'app.notice.form.lable.message',
                            defaultMessage: '公告内容'
                        })}
                        name="message"
                        rules={[
                            {
                                required: true,
                                message: intl.formatMessage({
                                    id: 'app.notice.form.rule.message.message',
                                    defaultMessage: '请输入公告内容'
                                }),
                            },
                        ]}
                    >
                        <Input style={{width:200}} placeholder={intl.formatMessage({
                            id: 'app.notice.form.input.placeholder.message',
                            defaultMessage: '请输入公告内容',
                        })} />
                    </Form.Item>
                    
                    <PaginationQueryNoticeTable data={data}/>
                    <Row justify="end">
                        <Col>
                            <Space>
                                <Button htmlType="button" onClick={handleCancel}>
                                    {intl.formatMessage({
                                        id: 'component.button.cancel',
                                    })}
                                </Button>
                                <Button type="primary" htmlType="submit">
                                    {intl.formatMessage({
                                        id: 'component.button.submit',
                                    })}
                                </Button>
                            </Space>
                        </Col>
                    </Row>
                </Form>

            </Modal>
        </>
    )
}
export default NoticeOperatePanel;
